<script setup>
import Son1Com from "@/components/Son1Com.vue";
import Son2Com from "@/components/Son2Com.vue";
import {useCounterStore} from "@/store/counter.js";
import {useChannelStore} from "@/store/channel.js";
import {storeToRefs} from "pinia";

const counterStore = useCounterStore();
const channelStore = useChannelStore();

// 如果直接解构 pinia 中的数据不处理，它会丢失响应式
// const {count, msg} = counterStore
// 为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()。它将为每一个响应式属性创建引用。而 actions 则不用
// 简而言之：解构数据需要使用 storeToRefs() 保证响应性；而解构方法则不用,直接解构即可
const {count, msg} = storeToRefs(counterStore)

const {channelList} = storeToRefs(channelStore)
const {getList} = channelStore
</script>

<template>
    <div>
        <h3>
            I am APP.
            - {{ count }}
            - {{ msg }}
        </h3>
        <Son1Com/>
        <Son2Com/>
        <hr>
        <button @click="getList">获取频道数据</button>
        <ul>
            <li v-for="item in channelList" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<style scoped>

</style>